<template>
  <div class="m-hdinfo">
    <div class="m-price">
      <span>￥</span>
      <span>{{price}}</span>
      <span>起/人</span>
      <span>
        <van-cell is-link @click="showPopup"><i class="iconfont">&#xe60d;</i></van-cell>
      </span>
      <van-popup
        v-model:show="show"
        teleport="body"
        closeable
        round
        position="bottom"
        :style="{ height: '30%' }"
        >内容</van-popup
      >
    </div>
    <!-- 标题 -->
    <div class="m-title">
     {{title}}
    </div>
    <!-- 标签 -->
    <div class="sup-label">
      <span class="sup-label-item" v-for="(item, index) in label" :key="index">
        <i class="iconfont">&#xebe6;</i>
        {{ item }}
      </span>
    </div>

    <!-- 优惠券信息 -->
    <div class="tag-list">
      <div class="tag-wrapper">
        <span class="g-tag">现金红包</span>
        <span class="g-tag">专享红包</span>
      </div>
      <div class="tag-icon">
        <i class="iconfont">&#xe61f;</i>
      </div>
    </div>

    <!-- 店铺红包 -->
    <div class="tips">
      <div class="tips-wrapper">
        <span class="g-tag" style="color: #ff1200">店铺红包 </span>
      </div>
      <div class="tips-content">您有4张可用红包未领取</div>
      <div class="tips-arrow">
        领券
        <i class="iconfont">&#xe629;</i>
      </div>
    </div>

    <div class="properties">
      <div class="properties-left">
        <span>
        <i class="iconfont">&#xe67d; </i>
        舒适游
      </span>
      <span>
        <i class="iconfont">&#xe67d; </i>
        无购物
      </span>
      <span>
        <i class="iconfont">&#xe67d; </i>
        铁定成团
      </span>
      </div>
      <div class="properties-right">
        <i class="iconfont">&#xe61f;</i>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
import { toRefs } from "vue";
export default {
  props:{
    price:{
      type:Number,
      default:9999
    },
    label:{
      type:Array
    },
    title:{
      type:String
    }
  },
  setup() {
    const show = ref(false);
    const state = reactive({
      labels: [
        "网红打卡点",
        "纯玩无购物",
        "纯玩私家团",
        "一站式超省心",
        "希尔顿",
        "全天免费接机",
        "私享专车",
      ],
    });
    const showPopup = () => {
      show.value = true;
    };
    return {
      ...toRefs(state),
      showPopup,
      show,
    };
  },
};
</script>
<style scoped>
.m-hdinfo {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background: #fff;
  position: relative;
  margin-top: -10px;
  padding: 15px 15px 0;
}
.m-price > span:nth-child(1) {
  font-size: 15px;
  color: #ff8300;
}
.m-price > span:nth-child(2) {
  font-size: 20px;
  color: #ff8300;
}
.m-price > span:nth-child(3) {
  font-size: 15px;
  color: #b0b0b0;
}
.m-price > span:nth-child(4) {
  font-size: 15px;
  color: #ffb652;
  display: inline-block;
  margin-left: 5px;
}
.sup-label {
  color: #212121;
  font-size: 10px;
  margin-bottom: 9px;
  margin-top: 6px;
}
.m-title {
  font-size: 18px;
}
.sup-label-item {
  display: inline-block;
  margin-right: 12px;
}
.sup-label-item .iconfont {
  font-size: 12px;
  font-weight: 600;
}
.tag-list {
  display: flex;
  justify-content: space-between;
  /* padding:  0px 10px ; */
  align-items: center;
}
.g-tag {
  color: #f77f00;
  display: inline-block;
  border: 1px solid #ffce9b;
  margin-right: 5px;
  font-size: 10px;
  border-radius: 5px;
  padding: 0px 3px;
}
.tag-icon .iconfont {
  font-size: 20px;
}
.tips {
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  /* padding: 0px 10px; */
  overflow-x: hidden;
  margin: 0 -15px;
  padding-left: 15px;
  height: 30px;
}
.tips-content {
  font-size: 12px;
  font-weight: 400;
  overflow: hidden;
  padding-right: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  display: flex;
  align-items: center;
  height: 100%;
}
.tips-arrow {
  font-size: 12px;
  color: #fe5655;
  background-color: #fee;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  padding: 3px 0px 3px 13px;
  display: flex;
  align-items: center;
}
.tips-wrapper{
  display: flex;
  align-items: center;
}
.properties{
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 2px solid#F9F9F9;
}
.properties-left span{
  display: inline-block;
  font-size: 13px;
  margin-right: 10px;
}
.properties-left span .iconfont{
  color: #9AE4EE;
  font-size: 10px;
}
.properties-right .iconfont{
  font-size: 20px;
}
</style>
